<template>
  <!--  外框架-->
  <div class="framework1">
    <!--      内框架-->
    <div class="framework2">
      <!--        角色管理表格-->
      <div class="top-class-table">
        <div class="header">
          <span>辖区管理->经营类别</span>
        </div>
        <!--          新增刷新-->
        <div class="button_group">
          <el-button-group>
            <el-button type="primary" icon="DocumentAdd" @click="addItem" v-if="permissionIsShow.add">新增类别</el-button>
          </el-button-group>
          <el-input v-model="search" placeholder="类别名称" style="width: 250px;margin-left: 15px;margin-right: 15px"
            clearable></el-input>
          <el-button type="primary" icon="Search" @click="load()">搜索</el-button>
        </div>
        <!--           数据表-->
        <div style="height: calc(100vh - 134px)">
          <el-table :data="tableData" :row-style="{ height: '47px' }" style="width: 100%;height:calc(100% - 68px)"
            :header-cell-style="{ background: '#f4f3f9' }">
            <el-table-column prop="id" label="标识符" width="auto" />
            <el-table-column prop="name" label="类别名称" width="auto" />
            <el-table-column prop="placeDesc" label="类别描述" width="auto" />
            <el-table-column fixed="right" label="操作" width="200" align="center"
              v-if="permissionIsShow.edit || permissionIsShow.delete">
              <template #default="scope">
                <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)"
                  v-if="permissionIsShow.edit">编辑</el-button>
                <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)"
                  v-if="permissionIsShow.delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--    分页-->
          <div class="footer">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10]"
              :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增 -->
    <el-dialog :close-on-click-modal="false" v-model="operationItemDialog" @open="handleDialogOpened" title="经营类别"
      width="700" @close="reset('form')">
      <el-form :model="form" :rules="rules" ref="form" label-position="right" class="demo-roleForm">
        <el-form-item label="类别名称" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入类别名称" />
        </el-form-item>
        <el-form-item label="类别描述" prop="placeDesc">
          <el-input v-model="form.placeDesc" placeholder="请输入类别描述" />
        </el-form-item>
        <el-form-item>
          <el-button style="font-size: 12px" type="primary" @click="submitForm('form')">提交</el-button>
          <el-button style="font-size: 12px;color: #606266" @click="reset('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "PlaceType",
  data() {
    return {
      operationItemDialog: false,
      tableData: [],
      form: {},
      currentPage: 1,
      pageSize: 10,
      total: 10,
      search: "",
      rules: {
        name: [
          { required: true, message: '请输入类别名称', trigger: 'blur' },
        ],
      },
      // 登录用户信息
      loginUserInfo: {
        id: '',
        responsibleScope: '', //查询范围
        roleLevel: '', //角色等级
        unitId: '', //内设部门ID
        userRole: '', //角色ID
        permissions: [], // 按钮路径（数据库中的path）
      },
      // 按钮权限
      permissionIsShow: {
        add: false,
        edit: false,
        delete: false,
      },
    };
  },
  created() {
    const info = JSON.parse(localStorage.getItem("user"));
    this.loginUserInfo = {
      id: Number(info.id),
      responsibleScope: info.responsibleScope, //查询范围
      roleLevel: Number(info.roleLevel),
      unitId: Number(info.unitId),
      userRole: Number(info.userRole),
      permissions: info.permissions.filter(item => Number(item.menuId) === 35).map(item => item.path),
    }
    this.permissionIsShow = {
      add: this.loginUserInfo.permissions.includes('placeType-add'),
      edit: this.loginUserInfo.permissions.includes('placeType-edit'),
      delete: this.loginUserInfo.permissions.includes('placeType-delete'),
    }
    this.load()
  },
  methods: {
    // 编辑
    editItem(scope) {
      Object.assign(this.form, scope)
      this.operationItemDialog = true
    },
    addItem() {
      this.operationItemDialog = true
    },
    // 地点类别的提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          request.post("/place-type/edit", this.form).then(res => {
            if (res.code === '200') {
              this.$message({
                type: "success",
                message: "提交成功"
              })
              this.load();
              this.reset(formName);
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      });
    },
    // 取消
    reset(val) {
      this.operationItemDialog = false;
      this.form = {};
      this.$refs[val].resetFields();
    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    },
    // 搜索及初始化
    load() {
      request.get("/place-type/page", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          name: this.search,
        }
      }).then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            if (key === "records") {
              this.tableData = res.data[key];
            } else if (key === "total") {
              this.total = res.data[key];
            }
          }
        } else {
          this.$message.error("错误" + res.msg)
        }
      })
    },
    async deleteItem(val) {
      let text = "";
      await request.get("/place/findPlaceByType/" + val).then(res => {
        if (res.code === "200") {
          if (res.data) {
            text = "该经营类别下存在辖区单位，是否确定删除?"
          } else {
            text = "是否确定删除经营类别?"
          }
        }
      })
      await this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning'
      }).then(() => {
        request.get("/place-type/delete/" + val).then(res => {
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "删除成功"
            })
            this.load();
          }
        })
      });
    },
  }
}
</script>


<style scoped>
#roleSpan {
  color: black;
  text-decoration: none;
}

/*   外框架   */
.framework1 {
  height: calc(100vh - 88px);
  width: calc(100vh - 200px);
  margin-left: 8px;
  border: solid 1px #D3D3D3;
}

/*   内框架   */
.framework2 {
  height: calc(100vh - 92px);
  border: solid 1px #D3D3D3;
}

/*   表格大标题   */
.header {
  font-size: 16px;
  font-weight: bold;
  padding: 4px 20px;
  height: 22px;
  background-color: #CCCCCC;
}

/*   表格按键组   */
.button_group {
  padding: 4px 10px;
  background-color: #DDDDDD;
}

/*   表格分页处   */
.footer {
  padding: 4px 10px;
  background-color: #f4f3f9;
}
</style>
